<template>
	<view class="content">
		<view class="header">
			<view class="top_box">
				<view class="left_box">
					<view class="left_name_box" @click="userGo">我的用户</view>
					<view class="left_num_box">{{ Obj.user_num }}</view>
				</view>
				<view class="right_box">
					<view class="rt_name_box" @click="recordBtn">提现明细</view>
					<view class="rt_num_box"></view>
				</view>
			</view>
			<view class="mid_box">奖励：
				<text>{{ Obj.total_commission }}元</text>
			</view>
			<!-- 提现 -->
			<view class="tixianAn_box" @click="tixianBtn">提现</view>
			<view class="yaoqing_box">
				<view class="top_txt_box">邀请链接</view>
				<view class="bot_box">
					<view class="lianjie_box">{{ Obj.share_url }}</view>
					<view class="fuzhi" @click="fuzhi">
						<image :src="url + '/static/newImg/copy.png'" mode="scaleToFill" />
					</view>
				</view>
			</view>
		</view>
		<view class="zhijiantui_box">
			<view :class="type == 1 ? 'zhitui_btn_box' : 'zhitui_btn_box1'" @click="zhituiBtn">直推</view>
			<view :class="type == 2 ? 'jiantui_btn_box' : 'jiantui_btn_box1'" @click="jiantuiBtn">间推</view>
		</view>
		<view class="date_box">
			<view class="left_box" @click="dateShowBtn" v-if="isdate == false">选择日期</view>
			<view class="left_box" @click="dateShowBtn" v-else>{{ date }}</view>
			<view class="right_box" @click="guize">规则</view>
		</view>
		<view class="zongchongzhi_box">
			<view class="left_box">用户总充值：
				<text style="color:#FFB02E;">
					{{ Obj.recharge }}元
				</text>
			</view>
			<view class="right_box">总收益：
				<text style="color:#FFB02E;">
					{{ Obj.commission }}元
				</text>
			</view>
		</view>
		<scroll-view scroll-y class="chongzhiList_box">
			<view class="dange_box" v-for="(item, index) in list" :key="index">
				<view class="left_box">
					<view class="touxiang_box">
						<image :src="item.avatar" mode="scaleToFill" />
					</view>
					<view class="text_box">
						<view class="top_txt">{{ item.nickname }}</view>
						<view class="bot_txt">ID:{{ item.form_user_id }}</view>
					</view>
				</view>
				<view class="right_box">
					<view class="neirong_box">
						<view class="top1_txt">购买充值</view>
						<view class="bot1_txt" style="color:#FFB02E;">{{ item.price }}大王币</view>
					</view>
				</view>
			</view>
			<view style="height:150rpx;"></view>
		</scroll-view>
		<!-- #ifdef APP-PLUS -->
		<view class="yaoqingyh_box" @click="yaoqingBtn">邀请用户</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <button type="default" open-type="share">
			<view class="yaoqingyh_box">邀请用户</view>
		</button> -->
		<!-- #endif -->
		<u-calendar v-model="dateShow" :mode="mode" @change="dateChange">
			<view slot="tooltip">
				<view class="title" @click="quanbu">
					全部
				</view>
			</view>
		</u-calendar>
		<u-popup mode="center" v-model="tixianTc" border-radius="20">
			<view class="tixian_box">
				<view class="title_box" @click="guizeBtn">提现</view>
				<view class="ipt_box">
					<input type="text" placeholder="收款人姓名：" v-model="nameValue">
				</view>
				<view class="ipt_box">
					<input type="text" placeholder="收款金额：" v-model="moneyValue">
				</view>
				<view class="sahngchuan_box">
					<view class="beizhu">收款码：请上传固定收款码</view>
					<view class="shangchuan">
						<u-upload :header="header" :fileList="fileList" :action="action" @afterRead="afterRead"
							@delete="deletePic" @on-success="imgUpSuccess" multiple :maxCount="1"></u-upload>
					</view>
					<view class="title_beizhu">每周一核对结算佣金</view>
					<view class="deposit_box" @click="depositBtn">提交</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			action: 'https://new.qingfentool.vip/api/v1/upload/file',
			mode: 'date',//单个日期
			header: {
				Authorization: 'Bearer ' + uni.getStorageSync("USERINFO"),
			},
			isdate: false,
			Obj: {//页面对象
				share_url: '',
				user_num: '',
				total_commission: '',
			},
			list: [],//页面列表
			url: this.$configs.urls,
			type: 1,//1：直推2：间推
			date: "",//选择日期
			dateShow: false,//是否显示日期组件
			tixianTc: false,//提现弹窗
			fileList: [],//图片上传
			nameValue: '',//姓名
			moneyValue: '',//金额
			imageUrl: '',//上传成功的img
		}
	},
	onLoad(e) {
		this.isStatus = e.isStatus//是否为推广员 -1：啥也不是 0:审核中 1：是推广员 
	},
	onShow() {
		this.getList()
	},
	onShareAppMessage(e) {

		return {
			title: '分享',
			path: `/userPage/user/myteam?id=${this.Obj.share_url}`
		}
	},
	methods: {
		// 规则
		guize() {
			uni.navigateTo({
				url: '/userPage/user/agreement?id=' + 110
			});
		},
		deletePic() {

		},
		// 提现明细
		recordBtn() {
			uni.navigateTo({
				url: '/userPage/user/Record'
			})
		},
		// 上传的图片
		imgUpSuccess(imageUrl) {
			this.imageUrl = imageUrl.data.url
		},
		// 提现
		depositBtn() {
			if (this.moneyValue < 100) {
				uni.showToast({
					title: '最低100可提现明细',
					icon: 'none'
				})
				return
			}
			let data = {
				name: this.nameValue,
				amount: this.moneyValue,
				image: this.imageUrl
			}
			this.$Request.post(this.$api.user.cash, data).then(res => {
				// //console.log(res)
				uni.showToast({
					title: '提交成功，等待审核',
					icon: 'none'
				})
				this.tixianTc = false
				this.nameValue = ''
				this.moneyValue = ''
				this.getList()

			})
		},
		tixianBtn() {
			this.tixianTc = true
		},
		// 点击日期
		dateShowBtn() {
			this.dateShow = true
		},
		// 选择日期
		dateChange(e) {
			this.date = e.result
			this.isdate = true
			this.getList()
		},
		// 全部时间
		quanbu() {
			this.date = ""
			this.isdate = false
			this.dateShow = false
			this.getList()
		},
		// 点击直推
		zhituiBtn() {
			this.type = 1
			this.getList()
		},
		// 点击间推
		jiantuiBtn() {
			this.type = 2
			this.getList()
		},
		// 我的用户
		userGo() {
			uni.navigateTo({
				url: '/userPage/user/myteamlist'
			})
		},
		// 邀请用户
		yaoqingBtn() {
			// 分享给微信好友
			var that = this
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: that.Obj.share_url,
				title: "分享",
				success: res => {
					uni.showToast({
						title: '分享成功',
						icon: 'success',
						duration: 600
					});
					that.getsharemh()
				}
			})
		},
		// 复制
		fuzhi(e) {
			let str = JSON.stringify(this.Obj.share_url)
			uni.setClipboardData({
				data: str, //要被复制的内容
				success: () => { //复制成功的回调函数
					uni.showToast({ //提示
						title: '复制成功'
					})
				}
			});
		},
		// 页面列表
		getList() {
			let data = {
				type: this.type,
				date: this.date
			}
			this.$Request.get(this.$api.user.teamIndex, data).then(res => {
				this.Obj = res.data
				this.list = res.data.list
				//console.log(this.list)
			});
		}

	}
}
</script>
<style lang="scss" scoped>
.content {
	width: 100vw;
	min-height: 100vh;
	background-color: #262626;

	.header {
		width: 100%;
		height: 514rpx;
		background: linear-gradient(180deg, #FFCE7E 0%, #FD9E00 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;

		.top_box {
			width: 100%;
			height: 140rpx;
			// background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.left_box {
				width: 240rpx;
				height: 100%;
				// background-color: skyblue;

				.left_name_box {
					width: 100%;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}

				.left_num_box {
					width: 100%;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 48rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 700;
					color: #FFFFFF;
				}
			}

			.right_box {
				width: 240rpx;
				height: 100%;

				.rt_name_box {
					width: 100%;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}

				.rt_num_box {
					width: 100%;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 48rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 700;
					color: #FFFFFF;
				}
			}
		}

		.mid_box {
			width: 100%;
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;

			text {
				font-size: 54rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #FFFFFF;
			}
		}

		.tixianAn_box {
			width: 234rpx;
			height: 76rpx;
			background: #FF8400;
			box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			border: 1rpx solid #000000;
			line-height: 76rpx;
			margin: auto;
			text-align: center;
			margin-bottom: 10rpx;
		}

		.yaoqing_box {
			width: 350rpx;
			height: 140rpx;
			margin: auto;

			.top_txt_box {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}

			.bot_box {
				width: 100%;
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lianjie_box {
					width: 246rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

				}

				.fuzhi {
					width: 40rpx;
					height: 40rpx;
					// background-color: #fff;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}


		}
	}

	.zhijiantui_box {
		width: 70%;
		height: 90rpx;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.zhitui_btn_box {
			width: 176rpx;
			height: 54rpx;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			border: 1rpx solid #FFAE2A;
			text-align: center;
			line-height: 54rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;

		}

		.zhitui_btn_box1 {
			width: 176rpx;
			height: 54rpx;
			// background: rgba(0, 0, 0, 0.1);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			// border: 1rpx solid #FFAE2A;
			text-align: center;
			line-height: 54rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;

		}

		.jiantui_btn_box {
			width: 176rpx;
			height: 54rpx;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			border: 1rpx solid #FFAE2A;
			text-align: center;
			line-height: 54rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;

		}

		.jiantui_btn_box1 {
			width: 176rpx;
			height: 54rpx;
			// background: rgba(0, 0, 0, 0.1);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			opacity: 1;
			// border: 1rpx solid #FFAE2A;
			text-align: center;
			line-height: 54rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;

		}
	}

	.date_box {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;

		.left_box {
			width: 222rpx;
			height: 58rpx;
			background: #FFB02E;
			border-radius: 70rpx 70rpx 70rpx 70rpx;
			opacity: 1;
			text-align: center;
			line-height: 58rpx;
			color: white;
		}

		.right_box {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.zongchongzhi_box {

		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;

		.left_box {
			width: 49%;
			height: 40rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
		}

		.right_box {
			text-align: right;
			width: 49%;
			height: 40rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}

	.chongzhiList_box {
		width: 98%;
		height: calc(100vh - 724rpx);
		margin: auto;

		.dange_box {
			width: 706rpx;
			height: 142rpx;
			background: rgba(255, 231, 192, 0.1);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			border: 1rpx solid #FED187;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin: auto;
			margin-bottom: 20rpx;

			.left_box {
				width: 50%;
				height: 100%;
				// background-color: #fff;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.touxiang_box {
					width: 73rpx;
					height: 73rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					// background-color: #fff;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text_box {
					width: 180rpx;
					height: 80rpx;
					color: #FFFFFF;

					.top_box {
						width: 180rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
					}

					.bot_box {
						width: 180rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}

			.right_box {
				width: 50%;
				height: 100%;

				.neirong_box {
					width: 100%;
					height: 140rpx;
					// float: right;
					text-align: right;
					padding-top: 30rpx;
					color: white;

					.top1_box {
						width: 100%;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						margin-bottom: 10rpx;
					}

					.bot1_box {
						width: 100%;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
					}
				}
			}
		}

	}

	.yaoqingyh_box {
		position: fixed;
		width: 496rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		border: 1rpx solid #FF9F00;
		bottom: 60rpx;
		left: 0;
		right: 0;
		margin: auto;
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		background-color: #FFB02E;
	}

	.tixian_box {
		width: 616rpx;
		height: 860rpx;
		background: #292928;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 2rpx solid #FFFFFF;

		.title_box {
			width: 300rpx;
			height: 108rpx;
			text-align: center;
			line-height: 108rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;
			margin: auto;
		}

		.ipt_box {
			width: 552rpx;
			height: 60rpx;
			margin: auto;
			margin-bottom: 46rpx;

			input {
				width: 552rpx;
				height: 60rpx;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 1rpx solid #FED187;
				color: #FFFFFF;
				padding-left: 16rpx;
			}
		}

		.sahngchuan_box {
			width: 552rpx;
			height: 350rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 1rpx solid #FED187;
			margin: auto;
			padding: 0 20rpx;

			.beizhu {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}

			.shangchuan {
				width: 100%;
				height: 250rpx;

				/deep/.u-list-item {
					background: none !important;
					background: rgba(0, 0, 0, 0.2);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					border: 1rpx solid #FED187;
				}

				/deep/.u-add-tips {
					display: none;
				}

				/deep/.u-icon__icon {
					font-size: 40rpx !important;
					color: #FED187 !important;
				}
			}

		}

		.title_beizhu {
			width: 100%;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 15rpx;
		}

		.deposit_box {
			width: 208rpx;
			height: 66rpx;
			background: #FFB02E;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin: auto;
			line-height: 66rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}
</style>